<template>
	<view class="custom-nav-bar">
		<view class="navbar">
			<view class="status-bar" :style="{ height: getStatusBarHeight() + 'px' }"></view>
			<view class="title-bar" :style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconWidth() + 'px' }">
				<view class="title">{{ title }}</view>
				<view class="search" @click="gotoSearch">
					<uni-icons class="icon" type="search" size="18" color="#888"></uni-icons>
					<input class="text" placeholder="搜索"></input>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view class="fill" :style="{ height: getNavBarHeight() + 'px' }"></view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIconWidth } from '@/utils/system.js'

defineProps({
	title: {
		type: String,
		default: '壁纸',
		required: true
	}
})

const gotoSearch = () => {
	uni.navigateTo({
		url: '/pages/search/search'
	})
}

</script>

<style lang="scss" scoped>
.custom-nav-bar {
	
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		background:
			linear-gradient(to bottom, transparent, #fff 400rpx),
			linear-gradient(to right, #beecd8 20%, #f3e2d8 );
		
		.status-bar {
			// border: 1px solid #000;
		}
		
		.title-bar {
			display: flex;
			align-items: center;
			height: 80rpx;
			padding: 0 30rpx;
			// border: 1px solid #000;
			
			.title {
				font-size: 44rpx;
				font-weight: 700;
				color: $text-font-color-1;
			}
			
			.search {
				width: 220rpx;
				height: 50rpx;
				border-radius: 60rpx;
				background: rgba(255, 255, 255, .4);
				border: 1px solid #fff;
				margin-left: 30rpx;
				color: #999;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				
				.icon {
					margin-left: 5rpx;
				}
				.text {
					padding-left: 10rpx;
				}
			}
		}
	}
	
	.fill {
		
	}
}
</style>